<template>
  <el-dialog
    title="任务详情"
    v-model="checkDialogShow"
    width="1400px"
    class="dialogBox"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleBack"
  >
    <div class="dialog-top">
      <div class="order-detail-header">
        <div class="order-container">
          <div class="container-footer">
            <div>
              任务分配时间：{{
                workOrderObj?.missionCenterListTaskInfoRespVo?.creatTime
              }}
            </div>
            <div>
              任务类型：{{
                workOrderObj?.missionCenterListTaskInfoRespVo?.businessTypeName
              }}
              
            </div>
          </div>
        </div>
        <div class="status-icon" :class="`status-icon${workOrderObj?.missionCenterListTaskInfoRespVo?.missionStatus}`">
          <!-- {{workOrderObj?.missionCenterListTaskInfoRespVo?.missionStatus}} -->
        </div>
        <!-- <div>{{ workOrderObj?.missionCenterListTaskInfoRespVo?.statusName }}</div> -->
      </div>
    </div>
    <div class="projectAdd" v-loading="detailInfoShow">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="基础信息" name="info">
          <!-- 筛选按钮 -->
          <el-collapse v-model="activeNames" v-if="activeFlag === 1">
            <el-collapse-item name="1" v-if="workOrderObj.manHour === 1">
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">工时统计</span>
              </template>
              <div style="display: flex; margin-top: 20px">
                <div style="margin-bottom: 20px">
                  <div style="height: 40px; background: #e6ffff; padding: 10px">
                    计划工时: {{ workOrderObj.planeTimeConver || "暂无数据" }}
                  </div>
                  <div
                    style="
                      height: 40px;
                      padding: 10px;
                      background: #fef5e9;
                      margin-top: 20px;
                    "
                  >
                    实际工时: {{ workOrderObj.actualTimeConver || "暂无数据" }}
                  </div>
                </div>
                <div
                  style="
                    height: 40px;
                    padding: 10px;
                    margin-left: 200px;
                    background: #e0fff4;
                  "
                  v-if="
                    workOrderObj?.missionCenterListTaskInfoRespVo
                      ?.actualStartTime
                  "
                >
                  {{
                    workOrderObj.actualTime - workOrderObj.plannedTime > 0
                      ? "延长："
                      : "缩短："
                  }}
                  {{ workOrderObj.lengthenConver || "暂无数据" }}
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item
              name="3"
              v-if="missionTypeName == '产品评估'"
              style="position: relative; margin-top: 20px"
            >
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">产品信息</span>
              </template>

              <div>
                <el-descriptions
                  border
                  style="margin: 20px 0"
                  column="2"
                  label-align="center"
                  align="center"
                >
                  <el-descriptions-item
                    label="采购名称"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      productInfo.purchaseName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="销售名称"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ productInfo.saleName || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="出厂型号"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ productInfo.factoryCode || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="销售型号"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ productInfo.saleCode || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="技术参数"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      productInfo.technologyParameter || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="数量单位"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      productInfo.materialUnitName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="预警数量"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      productInfo.warningNumber || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="是否允许负库存"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >
                    <div>{{ productInfo.underStock == 0 ? '否' : '是' }}</div>
                    </el-descriptions-item
                  >
                  <el-descriptions-item
                    label="供应商"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      productInfo.supplierName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="生产厂家"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      productInfo.manufactureName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="默认税率"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      productInfo.defaultTaxRateName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="首次采购日期"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      productInfo.firstPurchaseTime || "--"
                    }}</el-descriptions-item
                  >
                </el-descriptions>
              </div>
            </el-collapse-item>
            <el-collapse-item
              name="3"
              v-if="missionTypeName == '工单申请'"
              style="position: relative; margin-top: 20px"
            >
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">工单信息</span>
              </template>

              <div>
                <el-descriptions
                  border
                  style="margin: 20px 0"
                  column="2"
                  label-align="center"
                  align="center"
                >
                  <el-descriptions-item
                    label="工单时间"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ workInfo.createTime || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="工单类型"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ workInfo.typeName || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="问题描述"
                    :span="2"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ workInfo.remark || "--" }}</el-descriptions-item
                  >
                </el-descriptions>
              </div>
            </el-collapse-item>
            <!-- 基础信息 -->
            <el-collapse-item name="2" v-if="missionTypeName == '工单申请'">
              <!-- class="transform-down" -->
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">工单联系人</span>
              </template>
              <div class="contact-info">
                <el-table
                  :data="constructionData"
                  border
                  height="180px"
                  :header-cell-style="{ 'text-align': 'center' }"
                >
                  <el-table-column
                    type="index"
                    label="序号"
                    :show-overflow-tooltip="true"
                    min-width="60"
                    align="center"
                    prop="index"
                  />
                  <el-table-column
                    label="姓名"
                    prop="name"
                    :show-overflow-tooltip="true"
                    min-width="160"
                    align="center"
                  />
                  <el-table-column
                    label="联系方式"
                    prop="tel"
                    :show-overflow-tooltip="true"
                    min-width="160"
                    align="center"
                  />
                  <el-table-column
                    label="备注"
                    prop="remark"
                    :show-overflow-tooltip="true"
                    min-width="200"
                    align="center"
                  />
                </el-table>
              </div>
            </el-collapse-item>
            <!-- 甲方施工联系人 -->
            <el-collapse-item
              name="3"
              style="position: relative; margin-top: 20px"
              v-if="missionTypeName != '产品评估'"
            >
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">项目详情</span>
              </template>
              <div v-if="checkTypeFlag == 2" style="margin-top: 20px">
                <el-form-item label="情况说明：" prop="projectType">
                  {{ projectForm.projectStatusRemark || "无" }}
                </el-form-item>
              </div>
              <div>
                <el-descriptions
                  border
                  style="margin: 20px 0"
                  column="2"
                  label-align="center"
                  align="center"
                >
                  <el-descriptions-item
                    span="2"
                    label="项目名称"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectOrder.projectName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目编号"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectOrder.projectCode || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="所属行业"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectOrder.industryName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="所属公司"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectOrder.companyName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="业务人员"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectOrder.businessName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目类型"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectOrder.projectTypeName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目种类"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectOrder.projectCategoryName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目起止时间"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                  >
                    <template
                      v-if="projectOrder.startTime && projectOrder.endTime"
                    >
                      {{ projectOrder.startTime }} 至
                      {{ projectOrder.endTime }}
                    </template>
                    <template v-else> -- </template>
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="关联客户"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >
                    {{  workOrderObj.manHour === 1 ? projectOrder.customerName : "****" }}
                   </el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目执行地"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                  >
                    {{ projectOrder.executiveAddress || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="详细地址"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ projectOrder.address || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="项目金额"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >
                    {{  workOrderObj.manHour === 1 ? projectOrder.money : "****" }}元
                    </el-descriptions-item
                  >
                  <el-descriptions-item
                    label="是否签合同"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectOrder.includeContractName || "--"
                    }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="使用单位"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{ projectOrder.endUseUnit || "--" }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label="使用单位联系人"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                  >
                  <template v-if="workOrderObj.manHour === 1">
                    
                 
                    <template v-if="projectOrder.unitContact">
                      {{ projectOrder.unitContact }}-{{
                        projectOrder.unitContactInformation
                      }}
                    </template>
                    <template v-else> -- </template>
                  </template>
                  <template v-else>  **** </template>
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="质保起止时间"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    width="330px"
                  >
                    {{ projectOrder.warrantyStartTime || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item
                    label="质保终止时间"
                    label-class-name="desLabel"
                    label-align="center"
                    align="center"
                    >{{
                      projectOrder.warrantyEndTime || "--"
                    }}</el-descriptions-item
                  >
                </el-descriptions>
              </div>
            </el-collapse-item>
            <!-- 基础信息 -->
            <el-collapse-item name="4" v-if="subtaskTypeName == '现场勘察'">
              <!-- class="transform-down" -->
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">现场点位</span>
              </template>
              <div class="contact-info">
                <div class="contact-table-info">
                  <div v-if="!pointData.length">暂无数据</div>
                  <div
                    class="box-item"
                    v-for="(item, index) in pointData"
                    :key="index"
                  >
                    <div style="font-size: 16px" class="mb10">
                      {{ item.pointAdd }}
                    </div>
                    <div class="mb10">{{ item.detailAdd }}</div>
                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">物业名称：</span>
                        <span class="box-content">{{ item.propertyName }}</span>
                      </div>
                      <div class="item" style="margin-left: 20px">
                        <span class="box-title">物业联系方式：</span>
                        <span class="box-content">{{ item.propertyWay }}</span>
                      </div>
                    </div>
                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">派出所：</span>
                        <span class="box-content">{{ item.policeOffice }}</span>
                      </div>
                      <div class="item" style="margin-left: 20px">
                        <span class="box-title">派出所联系方式：</span>
                        <span class="box-content">{{ item.policeWay }}</span>
                      </div>
                    </div>

                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">租赁合同：</span>
                        <div v-if="item.suppFileInfoVos7.length">
                          <Upload
                            :fileList="item.suppFileInfoVos7"
                            :limit="10"
                            limitation="templatelimitation"
                            accept=".doc,.docx"
                            :isFull="true"
                            :isCanDelete="false"
                            :disabled="false"
                            :showButton="false"
                          />
                        </div>
                        <div v-else>暂无文件</div>
                      </div>
                    </div>
                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">现场照片：</span>
                        <div v-if="item.suppFileInfoVos1.length">
                          <Upload
                            :fileList="item.suppFileInfoVos1"
                            :limit="10"
                            limitation="templatelimitation"
                            accept=".doc,.docx"
                            :isFull="true"
                            :isCanDelete="false"
                            :disabled="false"
                            :showButton="false"
                          />
                        </div>
                        <div v-else>暂无文件</div>
                      </div>
                    </div>
                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">外包合同：</span>

                        <div v-if="item.suppFileInfoVos2.length">
                          <Upload
                            :fileList="item.suppFileInfoVos2"
                            :limit="10"
                            limitation="templatelimitation"
                            accept=".doc,.docx"
                            :isFull="true"
                            :isCanDelete="false"
                            :disabled="false"
                            :showButton="false"
                          />
                        </div>
                        <div v-else>暂无文件</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <!-- 基础信息 -->
            <el-collapse-item
              name="5"
              v-if="subtaskTypeName == '现场安装/调试'"
            >
              <!-- class="transform-down" -->
              <template #title>
                <span class="circle"></span>
                <span class="collapse-title">安装设备</span>
              </template>
              <div class="contact-info">
                <div class="contact-table-info">
                  <div v-if="!deviceData.length">暂无数据</div>
                  <div
                    class="box-item"
                    v-for="(item, index) in deviceData"
                    :key="index"
                  >
                    <div style="font-size: 16px" class="mb10">
                      {{ item.deviceName }}
                    </div>
                    <div class="mb10">设备编号：{{ item.deviceUuid }}</div>
                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">所属防区：</span>
                        <span class="box-content">{{
                          item.armedzoneName
                        }}</span>
                      </div>
                      <div class="item" style="margin-left: 20px">
                        <span class="box-title">安装点位：</span>
                        <span class="box-content">{{ item.pointNameChi }}</span>
                      </div>
                    </div>
                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">设备型号：</span>
                        <span class="box-content">{{ item.deviceModel }}</span>
                      </div>
                      <div class="item" style="margin-left: 20px">
                        <span class="box-title">设备类型：</span>
                        <span class="box-content">{{
                          item.deviceTypeName
                        }}</span>
                      </div>
                    </div>

                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">安装时间：</span>
                        <span class="box-content">{{ item.installTime }}</span>
                      </div>
                      <div class="item" style="margin-left: 20px">
                        <span class="box-title">安装方式：</span>
                        <span class="box-content">{{ item.installType }}</span>
                      </div>
                    </div>

                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">IP地址：</span>
                        <span class="box-content">{{ item.ipAddress }}</span>
                      </div>
                      <div class="item" style="margin-left: 20px">
                        <span class="box-title">路由器品牌型号：</span>
                        <span class="box-content">{{ item.routBrand }}</span>
                      </div>
                    </div>

                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">SIM卡信息：</span>
                        <span class="box-content">{{ item.simCard }}</span>
                      </div>
                      <div class="item" style="margin-left: 20px">
                        <!-- <span class="box-title">设备类型：</span>
                  <span class="box-content">{{item.policeWay}}</span> -->
                      </div>
                    </div>

                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">配件清单表：</span>

                        <div v-if="item.suppFileInfoVos3.length">
                          <Upload
                            :fileList="item.suppFileInfoVos3"
                            :limit="10"
                            limitation="templatelimitation"
                            accept=".doc,.docx"
                            :isFull="true"
                            :isCanDelete="false"
                            :disabled="false"
                            :showButton="false"
                            @success="(result) => uploadSuccess(result, 7)"
                            @deleteFile="(result) => uploadRemove(result, 7)"
                          />
                        </div>
                        <div v-else>暂无文件</div>
                      </div>
                    </div>
                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">用电协议：</span>
                        <div v-if="item.suppFileInfoVos4.length">
                          <Upload
                            :fileList="item.suppFileInfoVos4"
                            :limit="10"
                            limitation="templatelimitation"
                            accept=".doc,.docx"
                            :isFull="true"
                            :isCanDelete="false"
                            :disabled="false"
                            :showButton="false"
                            @success="(result) => uploadSuccess(result, 7)"
                            @deleteFile="(result) => uploadRemove(result, 7)"
                          />
                        </div>
                        <div v-else>暂无文件</div>
                      </div>
                    </div>
                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">现场完成照片：</span>

                        <div v-if="item.suppFileInfoVos5.length">
                          <Upload
                            :fileList="item.suppFileInfoVos5"
                            :limit="10"
                            limitation="templatelimitation"
                            accept=".doc,.docx"
                            :isFull="true"
                            :isCanDelete="false"
                            :disabled="false"
                            :showButton="false"
                            @success="(result) => uploadSuccess(result, 7)"
                            @deleteFile="(result) => uploadRemove(result, 7)"
                          />
                        </div>
                        <div v-else>暂无文件</div>
                      </div>
                    </div>
                    <div class="item mb10">
                      <div class="item">
                        <span class="box-title">现场设备照片：</span>

                        <div v-if="item.suppFileInfoVos6.length">
                          <Upload
                            :fileList="item.suppFileInfoVos6"
                            :limit="10"
                            limitation="templatelimitation"
                            accept=".doc,.docx"
                            :isFull="true"
                            :isCanDelete="false"
                            :disabled="false"
                            :showButton="false"
                            @success="(result) => uploadSuccess(result, 7)"
                            @deleteFile="(result) => uploadRemove(result, 7)"
                          />
                        </div>
                        <div v-else>暂无文件</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="任务分配" name="approval">
          <el-descriptions
            border
            style="margin: 20px 0"
            column="2"
            label-align="center"
            align="center"
          >
            <el-descriptions-item
              label="计划开始时间"
              label-class-name="desLabel"
              label-align="center"
              align="center"
              >{{
                workOrderObj?.missionCenterListTaskInfoRespVo?.startTime || "--"
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="预计结束时间"
              label-class-name="desLabel"
              label-align="center"
              align="center"
              >{{
                workOrderObj?.missionCenterListTaskInfoRespVo?.endTime || "--"
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="责任人"
              label-class-name="desLabel"
              label-align="center"
              align="center"
            >
              <div>
                <div v-if="!mouseFlag">
                  <div @mouseover="handleMouseOver()">
                    {{
                      workOrderObj?.missionCenterListTaskInfoRespVo
                        ?.principal || "--"
                    }}
                  </div>
                </div>
                <div v-else style="display: flex">
                  <el-select
                    filterable
                    style="width: 80%;height:100%;"
                    v-model="workOrderObj.principalIds"
                    multiple
                    placeholder="请选择"
                    clearable
                    class="search-input"
                  >
                    <el-option key="0" label="" value="" disabled>
                      <span style="float: left; color: #8492a6">人员姓名</span>
                      <span style="margin: 0 80px 0 50px; color: #8492a6"
                        >联系方式</span
                      >
                      <span
                        style="
                          margin: 0 100px 0 0px;
                          color: #8492a6;
                          font-size: 13px;
                        "
                        >职位</span
                      >
                      <span style="color: #8492a6; font-size: 13px">部门</span>
                    </el-option>
                    <el-option
                      v-for="item in userList"
                      :key="item.userId"
                      :label="item.nickName"
                      :value="item.userId"
                    >
                      <span
                        style="display: inline-block; width: 80px; float: left"
                        >{{ item.nickName }}</span
                      >
                      <span
                        style="
                          display: inline-block;
                          width: 125px;
                          margin: 0 15px 0 23px;
                          color: #8492a6;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        "
                        >{{ item.phonenumber ? item.phonenumber : "--" }}</span
                      >
                      <span
                        style="
                          display: inline-block;
                          width: 125px;
                          font-size: 13px;
                          margin: 0 0px 0 0px;
                          transform: translateY(-11px);
                          color: #8492a6;
                        "
                      >
                        {{ item.postName ? item.postName : "--" }}
                      </span>
                      <span
                        style="
                          display: inline-block;
                          margin: 0 0px 0 0px;
                          font-size: 13px;
                          transform: translateY(-11px);
                          color: #8492a6;
                        "
                      >
                        {{ item.fullDeptName ? item.fullDeptName : "--" }}
                      </span>
                    </el-option>
                  </el-select>
                  <div class="submitBtn" @click="handlePoint(1)">确认更换</div>
                </div>
              </div>
            </el-descriptions-item>
            <el-descriptions-item
              label="任务备注"
              label-class-name="desLabel"
              label-align="center"
              align="center"
            >
              <div
                class="desContent"
                :title="workOrderObj?.missionCenterListTaskInfoRespVo?.remark"
              >
                {{
                  workOrderObj?.missionCenterListTaskInfoRespVo?.remark || "--"
                }}
              </div>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="任务执行">
          <el-descriptions
            border
            style="margin: 20px 0"
            column="2"
            label-align="center"
            align="center"
          >
            <el-descriptions-item
              label="实际开始时间"
              label-class-name="desLabel"
              label-align="center"
              align="center"
              >{{
                workOrderObj?.missionCenterListTaskInfoRespVo
                  ?.actualStartTime || "--"
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="实际结束时间"
              label-class-name="desLabel"
              label-align="center"
              align="center"
              >{{
                workOrderObj?.missionCenterListTaskInfoRespVo?.finishTime ||
                "--"
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="完成情况"
              label-class-name="desLabel"
              label-align="center"
              align="center"
              >{{
                workOrderObj?.missionCenterListTaskInfoRespVo?.performance ||
                "--"
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="相关文档"
              label-class-name="desLabel"
              label-align="center"
              align="center"
            >
              <template
                v-if="
                  workOrderObj?.missionCenterListTaskInfoRespVo?.suppFileInfoVos
                "
              >
                <span
                  v-for="(item, index) in workOrderObj
                    ?.missionCenterListTaskInfoRespVo?.suppFileInfoVos"
                  :key="index"
                  @click="handleFileClick(item)"
                  class="fileText"
                  style="cursor: pointer"
                >
                  {{
                    item.name || "--"
                  }}<span
                    style="color: #000"
                    v-if="
                      index + 1 !==
                      workOrderObj?.missionCenterListTaskInfoRespVo
                        ?.suppFileInfoVos.length
                    "
                    >，</span
                  ></span
                >
              </template>
            </el-descriptions-item>
            <!-- workOrderObj?.missionCenterListTaskInfoRespVo?.suppFileInfoVos[0].url -->
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="操作日志">
          <div id="print-iframe">
            <!-- 步骤栏 -->
            <div class="steps-print-box">
              <el-steps
                direction="vertical"
                :class="flowInfoList.length > 7 ? 'BigSteps' : 'SmallSteps'"
                :active="flowingStep"
                finish-status="success"
              >
                <el-step v-for="(item, index) in flowInfoList" :key="index">
                  <template #title>
                    <div class="steps-top">
                      <div style="width: 200px">
                        {{ item.nodeName }}
                      </div>
                      <span class="steps-time">{{ item.createTime }}</span>
                    </div>
                  </template>
                  <template #description>
                    <!--                    <div class="steps-box-info" v-if="item.auditEmpList.length">-->
                    <!--                      <div-->
                    <!--                          v-for="(child, index) in item.auditEmpList"-->
                    <!--                          :key="index"-->
                    <!--                      >-->
                    <div class="ription">
                      {{ item.createUserName }} {{ item.operate }}
                    </div>
                    <div class="steps-box-info" v-if="item.remark">
                      处理反馈： {{ item.remark }}
                    </div>
                    <div class="line"></div>
                    <!--                      </div>-->
                    <!--                    </div>-->
                  </template>
                </el-step>
              </el-steps>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div></div>
    </div>
  </el-dialog>
</template>

<script setup>
import {
  getProvinceApi,
  // getCustomerListApi,
  getnewUserListApi,
} from "@/api/information/customer";
import { getallMaterialListApi } from "@/api/information/material";
import { getDictsApi } from "@/api/dict";
import useUserStore from "@/store/modules/user";
import { getInfoApi } from "@/api/operation/project";
import { operateLogApi, updateUserListApi,getUserListApi } from "@/api/operation/work";
import { ElMessage, ElMessageBox } from "element-plus";

import { onMounted } from "vue";
import Upload from "@/components/Upload/index";
import { Base64 } from "js-base64";
const route = useRoute();
const emit = defineEmits([
  // 项目新增组件显隐
  "projectAddShow",
  // 更新项目新增组件显隐
  "update:projectAddShow",
  // 刷新父组件表格数据
  "refreshList",
  // 更新跟进组件显隐
  "updateFollowAddShow",
]);
const userStore = useUserStore();
// 折叠栏默认展开
const activeNames = ref(["1", "2", "3", "4", "5", "6", "7"]);
const activeName = ref("info");
const activeFlag = ref(1);
// 客户表单引用
const projectFormRef = ref();

// 选择审核
const auditDialogShow = ref(false);
const loadingCheck = ref(false);
// 联系人表单引用
const contactFormRef = ref();
// 销售表单引用
const saleFormRef = ref();
// 联系人操作类型
const operateType = ref("");
// 详情加载效果
const detailInfoShow = ref(false);
const checkDialogShow = ref(false);
const checkTypeFlag = ref(null);
const detailFlag = ref(false);
// 新增编辑弹窗显隐
const operateDialogShow = ref(false);
// 联系人当前索引(编辑联系人使用)
const tableIndex = ref(null);
// 销售清单当前索引(编辑销售清单使用)
const tableIndexSec = ref(null);
// 输入框引用
const refInput = ref();
// 联系人输入框引用
const contactRefInput = ref();
// 下拉框引用
const refSelect = ref();
// 销售项目类目列表
const saleCategoryList = ref([]);
// 是否签合同列表
const contractList = ref([]);
// 是否中标列表
const successfulList = ref([]);
// 项目种类列表
const kindList = ref([]);
// 所属行业
const industryList = ref([]);
// 项目状态列表
const statusList = ref([]);
// 项目类型列表
const typeList = ref([]);
// 客户列表
const customerList = ref([]);
// 设备列表
const deviceList = ref([]);
//详细地址地图选择弹窗显隐
let isshowmap = ref(false);
let auditList = ref([]);
//日志数据
const flowInfoList = ref([]);
// 任务类型
let missionTypeName = ref("");
// 子任务类型
let subtaskTypeName = ref("");
//当前进度
const flowingStep = ref(0);
const construction = reactive({
  pageNum: 1,
  pageSize: 50,
});
// 总数
const constructioTotal = ref(0);
//工单联系人
const constructionData = ref([]);
const pointData = ref([]);
const deviceData = ref([]);
const projectOrder = ref({});
const workInfo = ref({});
const productInfo = ref({});
const mouseFlag = ref(false);
const delayedRecovery = ref(true);
//省市区校验规则
const provinceValidate = (rule, value, callback) => {
  const { province, city, area } = projectForm.value;
  if (!province || !city || !area) {
    callback(new Error("请选择省市区"));
  } else {
    callback();
  }
};
// 项目表单模板
const projectFormTemplate = {
  address: "",
  area: null,
  arrivalStatus: null,
  checkStatus: null,
  checkTime: "",
  city: null,
  constructionAddress: "",
  customerId: null,
  endTime: "",
  includeContract: null,
  installationCompletionTime: "",
  money: null,
  planContractTime: "",
  practiceStatus: null,
  probability: "",
  projectCategory: null,
  projectName: "",
  projectPracticeInfoRespVos: [],
  projectSaleInfoRespVos: [],
  projectStatus: null,
  projectType: null,
  province: null,
  remarks: "",
  startTime: "",
  userId: null,
  type: 0,
  successfulBidder: null,
  dateValue: [],
  bidderPictures: [],
};
//自定义数字限制
const digitalRestrictions = (rule, value, callback) => {
  if (value < 0 || value > 9999) {
    callback(new Error("请输入0-9999之内的数字"));
  } else {
    callback();
  }
};
const data = reactive({
  // 项目表单
  projectForm: JSON.parse(JSON.stringify(projectFormTemplate)),
  // 联系人表单
  contactForm: {
    name: "",
    phone: "",
    practiceId: null,
    projectId: null,
    remarks: "",
  },
  // 销售清单表单
  saleForm: {
    brand: "",
    materialId: null,
    materialUnit: null,
    materialUnitName: "",
    platformName: "",
    technologyParameter: "",
    projectId: null,
    projectSaleId: null,
    quantity: null,
    remarks: "",
    saleCategory: null,
    saleCategoryName: "",
    saleName: "",
  },
  // 项目表单校验规则
  queryRules: {
    projectName: [
      { required: true, message: "请输入项目名称", trigger: "blur" },
    ],
    userId: [{ required: true, message: "请选择业务人员", trigger: "change" }],
    projectStatus: [
      { required: true, message: "请选择项目状态", trigger: "change" },
    ],
    projectType: [
      { required: true, message: "请选择项目类型", trigger: "change" },
    ],
    dateValue: [
      { required: true, message: "请选择项目起止时间", trigger: "change" },
    ],
    projectCategory: [
      { required: true, message: "请选择项目种类", trigger: "change" },
    ],
    industry: [
      { required: true, message: "请选择所属行业", trigger: "change" },
    ],
    customerId: [
      { required: true, message: "请选择关联客户", trigger: "change" },
    ],
    city: [
      {
        required: true,
        validator: provinceValidate,
        message: "请选择省市区",
        trigger: "change",
      },
    ],
    address: [
      {
        required: true,
        message: "请输入详细地址",
        trigger: ["blur", "change"],
      },
      { min: 0, max: 49, message: "最多可输入50个字符", trigger: "blur" },
    ],
    probability: [
      { required: true, message: "请输入成交概率预估", trigger: "blur" },
      { validator: digitalRestrictions, trigger: "blur" },
    ],
    money: [
      { required: true, message: "请输入项目金额", trigger: "blur" },
      {
        pattern: /^\d{1,20}(\.\d+)?$/,
        message: "只能输入最多20位数字",
        trigger: "blur",
      },
    ],
    includeContract: [
      { required: true, message: "请选择是否签合同", trigger: "change" },
    ],
    successfulBidder: [
      { required: true, message: "请选择是否中标", trigger: "change" },
    ],
    planContractTime: [
      { required: true, message: "请选择计划成交合同时间", trigger: "change" },
    ],
    checkTime: [
      { required: true, message: "请选择验收日期", trigger: "change" },
    ],
    constructionAddress: [
      { required: true, message: "请输入施工地址", trigger: "blur" },
    ],
    installationCompletionTime: [
      { required: true, message: "请选择期望安装完成日期", trigger: "change" },
    ],
    endUseUnit: [
      { required: true, message: "请填写最终使用单位", trigger: "blur" },
    ],
    unitContact: [
      { required: true, message: "请填写使用单位联系人", trigger: "blur" },
    ],
    unitContactInformation: [
      {
        required: true,
        message: "请填写使用单位联系人联系方式",
        trigger: "blur",
      },
    ],
  },
  // 联系人表单校验规则
  queryContactRules: {
    name: [
      { required: true, message: "请输入姓名", trigger: "blur" },
      { min: 1, max: 15, message: "最多可输入15字", trigger: "blur" },
    ],
    phone: [
      { required: true, message: "请输入联系方式", trigger: "blur" },
      { min: 1, max: 11, message: "最多可输入11字", trigger: "blur" },
    ],
  },
  // 销售清单表单校验规则
  querySaleRules: {
    saleCategory: [
      { required: true, message: "请选择销售类目", trigger: "change" },
    ],
    materialId: [
      { required: true, message: "请选择设备名称", trigger: "change" },
    ],
    quantity: [{ required: true, message: "请输入设备数量", trigger: "blur" }],
    brand: [{ required: true, message: "请输入设备品牌", trigger: "blur" }],
  },
  // 省列表
  provinceList: [],
  // 市列表
  cityList: [],
  // 区列表
  areaList: [],
  // 用户列表
  userList: [],
  auditRemark: "",
  auditResult: "",
  applyId: "",
});
const {
  projectForm,
  contactForm,
  saleForm,
  queryRules,
  queryContactRules,
  querySaleRules,
  provinceList,
  cityList,
  areaList,
  userList,
  auditRemark,
  auditResult,
  applyId,
} = toRefs(data);

var typeNameList = ref([]);

/**
 * @description: 处理文件点击
 * @param {Object} item 文件信息
 */
const handleFileClick = (item) => {
  let docUrl = item.url;
  let officeUrl =
    "http://101.71.158.60:50098/onlinePreview?url=" +
    encodeURIComponent(Base64.encode(docUrl)) +
    "&watermarkTxt=" +
    encodeURIComponent(userStore.nickName); // 在新窗口打开编码后的链接
  window.open(officeUrl, "_target");
};

const getTypeName = () => {
  getDictsApi("erp_operate_log_type").then((res) => {
    if (res.code === 200) {
      typeNameList.value = res.data;
    }
  });
};

// 处理鼠标移入
const handleMouseOver = (type) => {
  // 权限判断
  if (workOrderObj.value.manHour === 1 && delayedRecovery.value && workOrderObj.value.missionCenterListTaskInfoRespVo?.missionStatus != 2) {
    mouseFlag.value = true;
  }
};

// 处理鼠标手势提交
const handlePoint = async (type) => {
  delayedRecovery.value = false;
  mouseFlag.value = false;
  const info = {
    userList: workOrderObj.value.principalIds,
    // projectEndTime: "",
    missionCenterId:
      workOrderObj.value.missionCenterListTaskInfoRespVo.missionCenterId,
    // projectStartTime: "",
  };
  const res = await updateUserListApi(info);
  setTimeout(() => {
    delayedRecovery.value = true;
  }, 2000);
  if (res.code === 200) {
    ElMessage.success(res.msg);
    let row = {
      businessTypeName:missionTypeName.value,
      subtaskTypeName:subtaskTypeName.value 
    }
    handleDetailInfo(workOrderObj.value.id,row);
  } else {
    ElMessage.error(res.msg);
  }
};

// 返回
const handleBack = () => {
  emit("update:projectAddShow", false);
};

/**
 * @description: 处理详情信息
 * @param {Number} id
 * @param {Number} type 区分项目立项、营销项目审核
 * @param {Number} detailFlagValue 区分详情、审核
 * @param {Number} flowUuid 审批使用id
 */
let workOrderObj = ref({});
const handleDetailInfo = async (id, row) => {
  missionTypeName.value = row.businessTypeName;
  subtaskTypeName.value = row.subtaskTypeName;
  await getUserListApi(2).then((res) => {
    if (res.length > 0) {
      userList.value = res;
    }
  });
  await getInfoApi(id).then((res) => {
    console.log("任务详情");
    console.log(res);

    if (res) {
      checkDialogShow.value = true;
      nextTick(() => {
        workOrderObj.value = res;
        workOrderObj.value.id = id;
        workOrderObj.value.principalIds =
          workOrderObj.value.missionCenterListTaskInfoRespVo.principalIds || [];
        constructionData.value = workOrderObj.value.erpWorkOrderConcats || [];
        pointData.value = workOrderObj.value.pointAddInfoRespVos || [];
        deviceData.value = workOrderObj.value.installDeviceInfoRespVos || [];
        projectOrder.value = workOrderObj.value.projectInfoRespVo;
        workInfo.value = workOrderObj.value.workOrderRespVo;
        productInfo.value = workOrderObj.value.materialInfoRespVo;
        // auditList.value.push(workOrderObj.value.task);
        workOrderObj.value.actualTimeConver = convertMinutes(
          workOrderObj.value.actualTime
        );
        workOrderObj.value.planeTimeConver = convertMinutes(
          workOrderObj.value.plannedTime
        );
        workOrderObj.value.lengthenConver = convertMinutes(
          Math.abs(
            workOrderObj.value.actualTime - workOrderObj.value.plannedTime
          )
        );

        // 用户
        pointData.value.forEach((followItem) => {
          followItem.suppFileInfoVos1 = [];
          followItem.suppFileInfoVos2 = [];
          followItem.suppFileInfoVos3 = [];
          followItem.suppFileInfoVos4 = [];
          followItem.suppFileInfoVos5 = [];
          followItem.suppFileInfoVos6 = [];
          followItem.suppFileInfoVos7 = [];
        });
        deviceData.value.forEach((followItem) => {
          followItem.suppFileInfoVos1 = [];
          followItem.suppFileInfoVos2 = [];
          followItem.suppFileInfoVos3 = [];
          followItem.suppFileInfoVos4 = [];
          followItem.suppFileInfoVos5 = [];
          followItem.suppFileInfoVos6 = [];
          followItem.suppFileInfoVos7 = [];
        });
        pointData.value.forEach((followItem) => {
          followItem.suppFileInfoVos?.forEach((groupItem) => {
            followItem[`suppFileInfoVos${groupItem.erpTaskType}`] = [groupItem];
          });
        });
        deviceData.value.forEach((followItem) => {
          followItem.suppFileInfoVos?.forEach((groupItem) => {
            followItem[`suppFileInfoVos${groupItem.erpTaskType}`] = [groupItem];
          });
        });
        function convertMinutes(minutes) {
          const minutesInADay = 8 * 60;
          const minutesInAnHour = 60;

          const days = Math.floor(minutes / minutesInADay);
          const hours = Math.floor((minutes % minutesInADay) / minutesInAnHour);
          const remainingMinutes = minutes % minutesInAnHour;

          return `${days}天${hours}小时${remainingMinutes}分钟`;
        }

        getOperateLogApi(workOrderObj.value.missionCenterListTaskInfoRespVo);
      });
      checkDialogShow.value = true;
    }
  });
};

const getOperateLogApi = (row) => {
  console.log("aa");
  console.log(row);
  let params = {
    type: 0,
    businessId: row.businessId,
    businessType: row.businessType,
    missionCenterId: row.missionCenterId,
  };
  operateLogApi(params).then((res) => {
    console.log("typeNameList");
    console.log(typeNameList);
    console.log('操作日志');
    console.log(res);
    if (res.code === 200) {
      flowInfoList.value = res.rows;
      console.log("flowInfoList.value", flowInfoList.value);
      flowInfoList.value.map((item) => {
        typeNameList.value.map((obj) => {
          if (item.type == obj.value) {
            item.typeName = obj.label;
          }
        });
      });
    }
  });
};

onMounted(() => {
  getTypeName();
});

defineExpose({
  handleDetailInfo,
});
</script>
<style lang="scss" scoped>
.status-icon {
  width:116px;
  height:101px;
  background: url("@/assets/images/status-icon-0.png");
  position:absolute;
  top: 20px;
  right:100px;
  z-index: 9999;
}

.status-icon0 {
  background: url("@/assets/images/status-icon-0.png");
}
.status-icon1 {
  background: url("@/assets/images/status-icon-1.png");
}
.status-icon2 {
  background: url("@/assets/images/status-icon-2.png");
}
.status-icon3 {
  background: url("@/assets/images/status-icon-3.png");
}
:deep(.el-collapse-item__header) {
  background-color: #f8faff;
}

.projectAdd {
  // padding: 20px 20px 0 20px;
  width: 100%;
  height: 100%;
  margin-bottom: 100px;
  :deep(.el-date-editor.el-input, .el-date-editor.el-input__wrapper) {
    width: 268px !important;
    height: 34px !important;
  }
  .project-info {
    padding: 20px 20px 5px 20px;
    background-color: #f0f0f0;
    margin: 10px 0;
  }
  .contact-info {
    padding-top: 20px;
  }
  :deep(.el-table) {
    th.el-table__cell {
      background: #f8f8f8 !important;
    }
  }
  .search-button {
    // position: relative !important;
    position: static;
  }
  :deep(.el-step__head.is-success) {
    color: #3399ff;
    border-color: #3399ff;
    position: relative;
  }
  :deep(.el-step__title) {
    // font-size: 16px;
    // line-height: 38px;
    // position: absolute;
    // top: -38px;
    // width: 140px;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }
  :deep(.el-step__title.is-success) {
    font-size: 14px;
    color: #333333;
  }
  :deep(.desLabel) {
    background: transparent !important;
    width: 200px;
    // overflow: hidden;
    // white-space: nowrap; /* 确保文本在一行内显示 */
    // text-overflow: ellipsis; /* 使用省略号表示文字被截断 */
    font-weight: 500 !important;
  }
  .desContent {
    // width: 100%;
    max-width: 500px;
    overflow: hidden;
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 使用省略号表示文字被截断 */
  }
  .pagination {
    margin-bottom: 20px;
  }
  .contact-table-info {
    // width: 780px;
    min-height: 50px;
    // padding-left: 20px;
    // margin-left: 20px;
    display: flex;
    overflow: auto;
  }
  .box-item {
    margin-right: 20px;
    position: relative;
    border: 1px solid #d7d7d7;
    width: 650px;
    min-height: 350px;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  .item-btn {
    position: absolute;
    right: 10px;
  }
  .item {
    display: flex;
  }
  .mb10 {
    margin-bottom: 15px;
  }
  .box-content {
    display: block;
    width: 200px;
    text-align: left;
    overflow: hidden;
  }
  .box-title {
    text-align: right;
    width: 108px;
    display: block;
  }
}
</style>

<style>
.dialogBox .el-dialog__title {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 18px;
  color: #000000;
  line-height: 42px;
}

.dialogBox .el-dialog__body {
  padding: 0px 20px !important;
  height: 740px !important;
  overflow: auto;
}
.dialogBox .el-dialog__header {
  padding-bottom: 0 !important;
}
.custom-dropdown .dropdown-slot {
  height: 28px;
  line-height: 28px;
}

.custom-dropdown .scrollable-options {
  max-height: 200px; /* 根据需要设置合适的高度 */
  overflow-y: auto;
}

.dialogBox .dialog-top {
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 42px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 18px;
}

.order-detail-header {
  //border: 1px red solid;
  height: 65px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .order-container {
    //border: 1px red solid;
    display: flex;
    width: 50%;
    flex-direction: column;
    justify-content: space-between;
    color: black;
    .order-title {
      font-weight: 600;
      font-size: 17px;
    }
    .container-footer {
      display: flex;
      justify-content: space-between;
    }
  }
}

.dialogBox .dialog-footer {
  position: absolute;
  padding: 10px 20px 0px 0px;
  bottom: 0px;
  right: 0px;
  z-index: 2000;
  width: 100%;
  height: 80px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.steps-time {
  font-size: 14px;
  color: #666666;
  margin-left: 300px;
}
.ription {
  margin: 10px 0;
}
.steps-print-box {
  height: 100%;
}
.steps-box-info {
  margin: 20px 0;
  padding: 10px;
  width: 630px;
  min-height: 56px;
  border: 1px solid #e6e6e6;
  .ription {
    margin-bottom: 10px;
  }
  .line {
    width: 100%;
    border: 1px solid #e6e6e6;
    margin-bottom: 10px;
  }
}
.steps-top {
  display: flex;
}
.submitBtn {
  padding-top: 6px;
  padding-left: 5px;
  color: #4359f9;
  cursor: pointer;
}

</style>
